<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 选择框 -->
      <QuestionsChoose @serch="submitHandler" @clear="clearHandler" />

      <!-- 数据长条  -->
      <el-alert
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- 题库列表 -->
      <el-table
        key="tableKey"
        :data="dataList"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%; margin-top: 10px"
        :header-cell-style="styleHandler"
      >
        <el-table-column align="center" label="试题编号">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="学科">
          <template slot-scope="scope">
            <span>{{ scope.row.subject }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目录">
          <template slot-scope="scope">
            <span>{{ scope.row.catalogID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <span>{{ mapObj[scope.row.questionType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题干">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间">
          <template slot-scope="scope">
            <span>{{ formatTime(scope.row.addDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="难度">
          <template slot-scope="scope">
            <span>{{ mapDiffObj[scope.row.difficulty] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入人">
          <template slot-scope="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column
          align="center"
          label="操作"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-view"
              circle
              plain
              size="small"
              @click="handleChange(scope.row.id)"
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="handleStatus(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="removeUser(scope.row.id)"
            ></el-button>
            <el-button
              size="small"
              type="success"
              icon="el-icon-check"
              circle
              plain
              @click="updataUser(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="q.pagesize"
        layout="  prev, pager, next, sizes,jumper"
        :total="total"
        style="margin: 20px 0; float: right"
      >
      </el-pagination>

      <!-- 题目预览弹出框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="questionsDialogVisible"
        width="50%"
      >
        <!-- :before-close="handleClose" -->
        <QuestionsDia
          :questionsId="questionsId"
          v-if="questionsDialogVisible"
          @success="success"
          :mapObj="mapObj"
          :mapDiffObj="mapDiffObj"
        ></QuestionsDia>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import QuestionsChoose from '../components/questions-choose.vue'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { questionType, direction, difficulty } from '@/api/hmmm/constants'
import dayjs from 'dayjs'
import QuestionsDia from '../components/questions-preview.vue'
export default {
  components: { QuestionsDia, QuestionsChoose },
  created () {
    this.getList()
    this.getMap()
    this.getDiffMap()
    // 键盘enter操作
    // document.onkeydown = function (e) {
    //   var key = window.event.keyCode
    //   if (key === 13) {
    //     this.handleFilter(this.requestParameters)
    //   }
    // }
  },
  data () {
    return {
      q: {
        page: 1,
        pagesize: 5
      },
      paylod: {
        page: 1,
        pagesize: 5
      },
      alertText: '',
      total: 0,
      dataList: [],
      questionType,
      direction,
      difficulty,
      mapObj: {},
      mapDiffObj: {},
      questionsDialogVisible: false,
      questionsId: '',
      questionForm: {}
    }
  },
  methods: {
    getMap () {
      questionType.forEach((item) => {
        this.mapObj[item.value] = item.label
      })
    },
    getDiffMap () {
      difficulty.forEach((item) => {
        this.mapDiffObj[item.value] = item.label
      })
    },
    async getList () {
      const res = await list(this.paylod)
      if (res.status !== 200) return
      this.dataList = res.data.items
      this.total = res.data.counts
      this.alertText = `数据一共${res.data.counts}条`
    },
    // 清除按钮
    clearHandler (questionForm) {
      this.questionForm = questionForm
    },
    // 搜索按钮
    async submitHandler (questionForm) {
      this.questionForm = questionForm
      this.paylod = {
        page: 1,
        pagesize: 5,
        ...questionForm
      }
      this.getList()
    },
    // 表头样式
    styleHandler () {
      return 'background:#fafafa'
    },
    // 格式化时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    handleChange (id) {
      this.questionsDialogVisible = true
      this.questionsId = id
    },
    handleStatus () {
      this.$router.push({ path: '/questions/new' })
    },
    async removeUser (id) {
      const res = await this.$confirm(
        '此操作将永久删除该题目，是否继续？',
        '提示',
        {
          type: 'warning'
        }
      ).catch((e) => e)
      if (res !== 'confirm') return
      const resu = await remove({ id: id })
      if (resu.status !== 200) return
      this.$message.success({
        showClose: true,
        message: '删除成功'
      })
      this.getList()
    },
    async updataUser (id) {
      const res = await this.$confirm(
        '此操作将该题目加入精选，是否继续？',
        '提示',
        {
          type: 'info'
        }
      ).catch((e) => e)
      if (res !== 'confirm') return
      choiceAdd({ id: id, choiceState: '1' })

      this.$message.success({
        showClose: true,
        message: '加入精选成功'
      })

      this.getList()
    },
    // 分页
    handleCurrentChange (val) {
      this.q.page = val
      this.paylod = { ...this.q, ...this.questionForm }
      this.getList()
    },
    handleSizeChange (val) {
      this.q.pagesize = val
      this.paylod = { ...this.q, ...this.questionForm }
      this.getList()
    },
    // 关闭对话框
    success () {
      this.questionsDialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px 10px;
  .choose {
    .box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .leftWord {
        font-size: 12px;
        color: pink;
      }
    }
  }
}
.el-alert--info.is-light {
  background-color: #f4f4f5;
}

::v-deep.el-pagination {
  .el-pagination__jump {
    margin-left: 0px;
  }
}

.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
